<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="./include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>机构登录</title>
    <%@include file="./include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/ui/partner_login.css">
    <link rel="stylesheet" href="${ctx}/css/common/layout.css">
</head>
<body>
<div class="page-container">
    <header>
        <img class="top-logo" src="${ctx}/image/login/logo_dark.png" alt="logo">
    </header>
    <img src="${ctx}/image/index/banner1.jpg" alt="">
    <div class="login-wrap qr-show" id="login_ctn">
        <div class="tabs">
            <a class="tab-itm sel" data-ctn="qr-ctn" href="javascript:void(0)" id="scan_login">扫码登录</a>
            <span class="split"></span>
            <a class="tab-itm" data-ctn="login-ctn" href="javascript:void(0)" id="account_login">账户登录</a>
        </div>
        <div class="tab-body show qr-ctn">
            <div class="qr-wrap">
                <div id="login_qr">
                    <img class="loading-img" src="${ctx}/image/loading.gif" alt="扫描登录二维码">
                </div>
                <div class="scan-stat" id="scan_stat">
                    <div class="scanning">
                        <i class="iconfont icon-roundcheckfill"></i>
                        <p>扫描成功</p>
                        <a href="javascript:void(0)" class="refresh-qr">返回二维码登录</a>
                    </div>
                    <div class="invalid">
                        <p>二维码已失效</p>
                        <a href="javascript:void(0)" class="refresh-qr">刷新</a>
                    </div>
                </div>
            </div>
            <div class="app-qr-wrap">
                <p>打开<a id="app_name_link" class="app-name" href="javascript:void(0)">同行者机构版</a>扫描二维码</p>
                <div class="app-qr">
                    <img src="${ctx}/image/appqr_code.png" alt="同行者机构版二维码">
                </div>
            </div>
            <div class="tips">
                <span><i class="iconfont icon-edit1"></i>免输入</span>
                <span><i class="iconfont icon-shandian"></i>更快</span>
                <span><i class="iconfont icon-anquan"></i>更安全</span>
            </div>
        </div>
        <div class="tab-body login-ctn">
            <form id="login_from" class="layui-form my-form" method="post">
                <div class="form-itm">
                    <label><i class="iconfont icon-peoplefill"></i></label>
                    <input type="text" placeholder="账号" name="loginName" lay-verify="loginName" autocomplete="off">
                </div>
                <div class="form-itm">
                    <label><i class="iconfont icon-lockfill"></i></label>
                    <input type="password" name="password" placeholder="密码" lay-verify="password" autocomplete="off">
                </div>
                <a class="db mb10 tr" id="forget_pwd_btn" href="javascript:void(0)">忘记密码</a>
                <a class="login-btn" id="login_btn" href="javascript:void(0)" lay-submit
                   lay-filter="login-form">登&nbsp;&nbsp;&nbsp;&nbsp;录</a>
            </form>
        </div>
    </div>
    <div class="f-def-dialog" id="forget_pwd_dialog">
        <div class="f-dialog-shadow"></div>
        <div class="f-dialog-content" style="height: auto;">
            <span class="close-icon"><i class="iconfont icon-close"></i></span>
            <div class="dialog-header">
                <span class="title">找回密码</span>
            </div>
            <div class="dialog-detail" style="width: 370px">
                <!-- 找回密码 -->
                <form id="findpwd_form" class="layui-form" method="post">
                    <div class="layui-form-item">
                        <div class="layui-input-block login-input">
                            <input type="text" name="mobile" lay-verify="mobile" id="phone" autocomplete="off"
                                   placeholder="请输入手机号码" class="layui-input l">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block login-input">
                            <input type="text" id="imgCode" lay-verify="imgCode" autocomplete="off"
                                   placeholder="请输入右侧图片内容"
                                   class="layui-input l" style="width: calc(100% - 120px);">
                            <img width="100" src="" alt="" id="code_img" style="height: 36px; width: 110px;">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block login-input">
                            <input type="text" name="verifyCode" id="verify_code" lay-verify="verifyCode"
                                   autocomplete="off"
                                   placeholder="请输入手机验证码" class="layui-input l" style="width: calc(100% - 120px);">
                            <button id="code" type="button" class="layui-btn layui-btn-primary"
                                    style="width: 110px!important">发送验证码
                            </button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block login-input">
                            <input type="password" class="layui-input" name="password" lay-verify="password1"
                                   placeholder="请输入新密码"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block login-input">
                            <input type="password" class="layui-input" name="repassword" lay-verify="repassword"
                                   placeholder="请再次输入确认密码"/>
                        </div>
                    </div>
                    <button type="button" class="layui-btn layui-btn-danger login-btn" lay-submit
                            lay-filter="findpwd-form">
                        重置密码
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary login-btn" id="reset_cancel_btn">取消
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="${ctx}/script/common/v_code.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctxStatic}/jquery.qrcode/jquery.qrcode.min.js"></script>
<script>
    $(function () {
        $('#forget_pwd_btn').click(function () {
            $('#forget_pwd_dialog').fadeIn();
            Vcode.params = {
                vMemberType: 2
            };
            Vcode.addEvent();
        });
        // 回车登录
        $("#login_from").keydown(function (e) {
            var e = e || event, keycode = e.which || e.keyCode;
            if (keycode == 13) {
                $("#login_btn").trigger('click');
            }
        });
        $("#reset_cancel_btn,.f-def-dialog .close-icon").click(function () {
            $(this).closest('.f-def-dialog').fadeOut();
            Vcode.unBind();
        });
    })
    layui.use(['form'], function () {
        var form = layui.form;
        form.verify({
            loginName: function (value) {
                if (!util.isValid(value)) {
                    return "登录名不能为空";
                }
            },
            password: function (value) {
                if (!util.isValid(value)) {
                    return "登录密码不能为空";
                }
            },
            mobile: function (value) {
                if (!util.isValid(value)) {
                    return "请输入手机号码";
                } else if (!util.checkMobile(value)) {
                    return "手机号码格式不正确";
                }
            },
            verifyCode: function (value) {
                if (value == "") {
                    return "请输入手机验证码";
                }
            },
            password1: function (value) {
                if (value == "") {
                    return "密码不能为空";
                } else if (!util.checkPassword(value)) {
                    return "密码格式不正确";
                }
            },
            repassword: function (value) {
                var pwd = $("#findpwd_form").find("[name=password]").val();
                if (value == "") {
                    return "确认密码不能为空";
                } else if (!util.checkPassword(value)) {
                    return "确认密码格式不正确";
                } else if (pwd != value) {
                    return "确认密码与新密码不匹配";
                }
            },
            imgCode: function (value) {
                if (value == "") {
                    return "请输入右侧图片内容";
                }
            }
        });

        // 登录
        form.on('submit(login-form)', function (data) {
            //loading层
            var loadIndex = top.layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
            txz.ajaxRequest({
                url: '${ctx}/user/login/login.do',
                type: 'POST',
                // async: false, // 使用同步的方法
                params: $('#login_from').serialize(),
                callBack: function (res) {
                    top.layer.close(loadIndex);
                    if (res.success) {
                        location.href = "${ctx}" + res.description;
                    } else {
                        util.layerMsgError(res.description)
                        console.log(res.description);
                    }
                }
            });


        });

        // 找回密码
        form.on('submit(findpwd-form)', function (data) {
            var newData = data;
            Vcode.checkCode(cb(newData));

            function cb(data) {
                $(data.elem).removeAttr("lay-submit");
                txz.ajaxRequest({
                    url: '${ctx}/user/login/resetPassword.do',
                    type: 'POST',
                    async: false, // 使用同步的方法
                    params: $('#findpwd_form').serialize(),
                    callBack: function (res) {
                        if (res.success) {
                            util.layerMsgSuccess('密码重置成功', function () {
                                location.reload();
                            });
                        } else {
                            $(data.elem).attr("lay-submit", "");
                            util.layerMsgError(res.description);
                        }
                    }
                })
            }
        });
    });
</script>
<script>
    (function (W) {
        var lgToken, quartzId;
        var loginApp = {
            bind: function () {
                $('#partner_login_btn').click(function () {
                    $('#login_ctn').fadeIn()
                    loginApp.makeQRCode()
                })
                $('#app_name_link').mouseover(function () {
                    $('.app-qr-wrap .app-qr').show()
                }).mouseout(function () {
                    $('.app-qr-wrap .app-qr').hide()
                })
                $('.refresh-qr').click(function () {
                    loginApp.makeQRCode()
                })
                $('.tab-itm').click(function () {
                    loginApp.changeTabs(this)
                })
            },
            changeTabs: function (o) {
                $('#login_ctn .tab-itm.sel').removeClass('sel')
                $(o).addClass('sel')
                $('#login_ctn .tab-body.show').removeClass('show')
                $('#login_ctn .' + $(o).data('ctn')).addClass('show')

                var id = $(o).attr('id');
                if (id === 'account_login') {
                    clearInterval(quartzId)
                } else if (id === 'scan_login') {
                    loginApp.makeQRCode();
                }
            },
            // 生成二维码
            makeQRCode: function () {
                $('#scan_stat').hide()

                $.post('${ctx}/user/scanLogin/generateQRCodeLogin.do', {}, function (res) {
                    if (res.success) {
                        // $("#login_qr").attr('src', res.data.qrcodeUrl);
                        $('#login_qr').qrcode({
                            width: 150,
                            height: 150,
                            render: "canvas",
                            text: res.data.content
                        });
                        lgToken = res.data.lgToken;
                        quartzId = setInterval(function () {
                            loginApp.checkQRCode();
                        }, 2000);
                    } else {
                        util.layerMsgError(res.description);
                    }
                });
            },
            // 检查二维码
            checkQRCode: function () {
                $.post('${ctx}/user/scanLogin/checkQRCodeStatus.do', {lgToken: lgToken}, function (res) {
                    if (!res.success) {
                        loginApp.showScanErr();
                        clearInterval(quartzId);
                    } else {
                        switch (res.data.code) {
                            case 10001:
                                // 扫描成功
                                loginApp.showScanSucc();
                                break;
                            case 100012:
                            case 10002:
                                // 失效
                                loginApp.showScanErr();
                                break;
                            case 10003:
                                // 登录成功
                                if (res.data.forwardUrl) {
                                    location.href = '${ctx}' + res.data.forwardUrl;
                                }
                                break;
                        }

                        var result = 10002 !== res.data.code && 100012 !== res.data.code && 10003 !== res.data.code;
                        if (!result) {
                            if (res.data.code === 10003 && res.data.forwardUrl) {
                                clearInterval(quartzId);
                            } else if (res.data.code !== 10003) {
                                clearInterval(quartzId);
                            }
                        }
                    }
                })
            },
            showScanSucc: function () {
                $('#scan_stat').show()
                $('#scan_stat .scanning').show()
                $('#scan_stat .invalid').hide()
            },
            showScanErr: function () {
                $('#scan_stat').show()
                $('#scan_stat .scanning').hide()
                $('#scan_stat .invalid').show()
                clearInterval(quartzId);
            }
        }
        loginApp.bind()
    })(window)
</script>
</body>
</html>